import {
	createStackNavigator,
	createSwitchNavigator,
	createAppContainer
} from 'react-navigation'
import {
	createReduxContainer,
	createReactNavigationReduxMiddleware
} from 'react-navigation-redux-helpers'
import { connect } from 'react-redux'

import WelcomePage from '../page/WelcomePage'
import HomePage from '../page/HomePage'
import DetailPage from '../page/DetailPage'
import FetchDemoPage from '../page/FetchDemoPage'
import AsyncStorageDemoPage from '../page/AsyncStorageDemoPage'
import DataStoreDemoPage from '../page/DataStoreDemoPage'

const InitNavigator = createStackNavigator({
	Welcome: {
		screen: WelcomePage,
		navigationOptions: {
			header: null //禁用StackNavigator的NaviagtionBar
		}
	}
})

const MainNavigator = createStackNavigator({
	HomePage: {
		screen: HomePage,
		navigationOptions: {
			header: null //禁用StackNavigator的NaviagtionBar
		}
	},
	DetailPage: {
		screen: DetailPage,
		navigationOptions: {
			header: null //禁用StackNavigator的NaviagtionBar
		}
	},
	FetchDemoPage: {
		screen: FetchDemoPage,
		navigationOptions: {
			title: 'FetchDemo'
		}
	},
	AsyncStorageDemoPage: {
		screen: AsyncStorageDemoPage,
		navigationOptions: {
			title: 'AsyncStorageDemo'
		}
	},
	DataStoreDemoPage: {
		screen: DataStoreDemoPage,
		navigationOptions: {
			title: 'DataStoreDemo'
		}
	}
})

export const rootCom = 'Init'
export const RootNavigator = createAppContainer(
	createSwitchNavigator({
		Init: InitNavigator,
		Main: MainNavigator
	})
)

//初始化react-navigation与redux的中间件
export const middleware = createReactNavigationReduxMiddleware(
	state => state.nav
)
const App = createReduxContainer(RootNavigator)
//state到props的映射关系
const mapStateToProps = state => ({
	state: state.nav
})
const AppNavigator = connect(mapStateToProps)(App)

export default AppNavigator
